<template>
 <!-- <div> -->
  <el-dialog :class="`tw-libeldialog x${_uid}`"
  :title="title"
  :fullscreen="fullscreen"
  :top="top"
  :modal="modal"
  :modal-append-to-body="modalbody"
  :append-to-body="appendbody"
  :lock-scroll="lockscroll"
  :custom-class="customclass"
  :close-on-press-escape="closeescape"
  :close-on-click-modal="closemodal"
  :show-close="showclose"
  :destroy-on-close="destroyclose"
  :before-close="beforeclose?handleClose:null"
  :visible.sync="val"
  :width="width"
  :center="center">
  <template slot="title" v-if="list.length>0 && list[0].title"><div v-html="list[0].title"></div></template>
  <!-- <span>需要注意的是内容是默认不居中的</span> -->
  <slot></slot>
  <template slot="footer" v-if="list.length>0 && list[0].footer">
    <div ref="footer" v-html="list[0].footer"></div>
  </template>
  <template slot="footer" v-else>
   <el-button @click="handleCancel">{{btnTitleCancel ? btnTitleCancel : '取 消'}}</el-button><el-button type="primary" @click="handleSubmit">{{btnTitleSubmit ? btnTitleSubmit : '确 定'}}</el-button>
  </template>
</el-dialog>
 <!-- </div> -->
</template>

<script>
import props from './props'

export default {
  name: 'libradio',

  props,

  data() {
    return {
      val: false
    }
  },

  methods: {
    changeValue () {
      this.$emit('input', this.val)
      this.$emit('change', this.val)
    },
    handleCancel () {
      if (typeof this.onCancel === 'function') {
        this.onCancel(this)
      } else {
        this.val = false
        this.changeValue()
      }
    },
    handleSubmit () {
      if (typeof this.onSubmit === 'function') {
        this.onSubmit(this)
      } else {
        this.val = false
        this.changeValue()
      }
    },
    handleClose () {
      if (typeof this.onClose === 'function') {
        this.onClose(this)
      } else {
        this.val = false
        this.changeValue()
      }
    },

    setStyle () {
      let style = ''
      style += `
        .libeldialog.x${this._uid} {

        }
      `

      if (typeof this.setCusStyle === 'function') {
        style += this.setCusStyle()
      }

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
  },

  computed: {
    style () {
      return {
      }
    }
  },

  mounted () {
    this.setStyle()
    this.val = this.value ? true : false
    if (this.list.length>0 && this.list[0].footer) {
      this.$nextTick(() => {
        this.$refs.footer.childNodes[0].addEventListener('click', this.handleCancel)
        this.$refs.footer.childNodes[1].addEventListener('click', this.handleSubmit)
      })
    }
  },

  watch: {
    value () {
      this.val = this.value ? true : false
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  },
  beforeDestroy () {
    if (this.list.length>0 && this.list[0].footer && this.$refs.footer.childNodes.length > 0) {
      this.$refs.footer.childNodes[0].removeEventListener('click', this.handleCancel)
      this.$refs.footer.childNodes[1].removeEventListener('click', this.handleSubmit)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
